<script setup lang="ts">
import {
	onMounted,
	reactive,
	ref,
	Ref,
} from 'vue';

import {
	onShow,onLoad,
	onShareAppMessage,
	onShareTimeline
} from '@dcloudio/uni-app'
import HomeSkeleton from './home-skeleton.vue';
import Course from '../../course/course.vue'

// defineProps<{ flag: Boolean }>()

const flag: Ref<boolean> = ref(true);

// onMounted(() => {
// 	setTimeout(() => {
// 		flag.value = false;
// 	}, 2000);
// });

onLoad(() => {
	setTimeout(() => {
		flag.value = false;
	}, 1500);
})

// 页面跳转
const mycourse = () => {
	uni.navigateTo({
		url: '/pages/index/mycourse/mycourse',
	});
};

// 页面跳转
const notion = () => {
	uni.navigateTo({
		url: '/pagesB/notion/index/index',
	});
};


// 页面跳转
const rank = () => {
	uni.switchTab({
		url: '/pages/ranklist/ranklist',
	});
};

// 页面跳转
const exam = () => {
	uni.navigateTo({
		url: '/pages/index/exam/exam',
	});
};


// #ifdef MP-WEIXIN	

// 用户点击右上角分享

onShareAppMessage((res) => {
	if (res.from === 'button') {// 来自页面内分享按钮
      console.log(res.target)
    }
    return {
      title: '自定义分享标题',
    //   path: '/pages/test/test?id=123'
    }

})


onShow(() => {
	uni.updateShareMenu({
		withShareTicket: true,
		success() {}
	})

});
// #endif



</script>

<template>
	<HomeSkeleton v-if="flag"></HomeSkeleton>
	<!-- <Loader v-if="flag"></Loader> -->

	<template v-else>
		<view class="container">
			<view class="header">
				<view class="name">
					<view class="title">Hi，聂会民同学</view>
					<text>让我们开始学习吧!</text>
				</view>
				<view class="img animate__animated animate__rotateIn">
					<!-- <image src="/static/logo.png" mode=""></image> -->
					<image src="/static/images/man.svg" mode=""></image>
				</view>
			</view>
			<view class="center">
				<view class="title">我的任务</view>
				<view class="box">
					<view class="left">
						<view class="item1 animate__animated animate__fadeInLeft" @click="mycourse">
							<image src="/static/images/mycourse.svg" mode=""></image>
							<view>我的课程</view>
							<view>10</view>
						</view>
						<view class="item2 animate__animated animate__fadeInUp" @click="notion">
							<image src="/static/images/notion.svg" mode=""></image>
							<view>通知</view>
						</view>
					</view>
					<view class="right">
						<view class="item3 animate__animated animate__fadeInDown" @click="rank">
							<image src="/static/images/model.svg" mode=""></image>
							<view>排名</view>
						</view>
						<view class="item4 animate__animated animate__fadeInRight" @click="exam">
							<image src="/static/images/calendar.svg" mode=""></image>
							<view>考试中心</view>
							<view>3</view>
						</view>
					</view>
				</view>
			</view>
			<view class="coursehall">
				<view class="title">课程大厅</view>
				<Course></Course>
			</view>
			<view class=""></view>
		</view>
	</template>
	<!-- <skeleton width="100rpx" height="100rpx"></skeleton> -->
</template>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background-color: #f6f6f6;

	.title {
		font-weight: 600;
	}

	.header {
		width: 100%;
		height: 120rpx;
		// background-color: #1f8efa;
		@include flex(space-between);

		.name {
			text {
				font-size: 0.8em;
				margin-top: 20rpx;
				letter-spacing: 2rpx;
				color: $grey-color;
			}
		}

		.img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.center {
		margin-top: 35rpx;

		// background-color: red;
		.box {
			margin-top: 30rpx;
			@include flex(space-between);

			.left {
				flex: 1;

				.item1 {
					height: 260rpx;
					background-color: $bgcolor;
					margin: 0 15rpx 0 0;
				}

				.item2 {
					height: 200rpx;
					background-color: #48c977;
					background-color: rgb(61, 184, 143);
					margin: 30rpx 15rpx 0 0;
					@include flex();
				}
			}

			.right {
				flex: 1;

				.item3 {
					height: 200rpx;
					background-color: $purple-color;
					margin: 0 0 30rpx 15rpx;
					@include flex();
				}

				.item4 {
					height: 260rpx;
					background-color: #f2ad41;
					margin: 15rpx 0 0 15rpx;
				}
			}

			.item1,
			.item2,
			.item3,
			.item4 {
				border-radius: 20rpx;
				background: url('/static/images/boxbg.svg') no-repeat;
				overflow: hidden;
				background-size: cover; //或者background-size:100%;
				@include flex-column();
				color: #ffffff;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}

	.coursehall {
		margin-top: 35rpx;
	}
}
</style>
